<template>
	<view class="observe-content">
		<view
			style="position: fixed; left: 0;top: -200px;z-index: 1; width: 100%; height: 500px; background-color: #FFC972;">
		</view>
		<view style="background-color: #FFC972;">
			<rf-navbar :back="true" @click="goback" :title="'  '"
				src="../../static/images/course/coursebgtop.png"></rf-navbar>
			<view class="w100 header">
				<view class="inline date ">
					<image class="header-bg" src="../../static/images/course/courseBg.png" mode="widthFix">
					</image>
					<view class="dateContent">
						<view class="">
							<view class="bold f36">{{ week }}</view>
							<view class="f32 mt10">{{ dateStr }}</view>
						</view>
						<!-- <view class="new-btn" @click="handleAddObserve">
							<view class="new-text f28 bold">创建教案</view>

							<view class="circle-button">
								<span class="arrow-right"></span>
							</view>
						</view> -->
					</view>

				</view>
			</view>
		</view>

		<!-- 观察内容 -->
		<view class="observe-body">

			<u-sticky :offset-top="navbarHeight">
				<view class="sticky_container">
					<view class="date">
						<view class="now-date fl">
							<span class="f44 bold">{{ nowDay }}</span>
							<span class="f32 bold ml10">{{ nowMonth }}月</span>
						</view>
						<view class="select-date fr">
							<view class="f32 bold">{{ nowYear }}</view>
						</view>
					</view>
					<view class="tab">
						<view :class="{highlight_tab:currentTabidx==0,normal_tab:currentTabidx!=0}"
							@click="selectTab('', 0)">
							<view class="text">全部</view>
							<view class="bottom_line"></view>
						</view>

						<view :class="{highlight_tab:currentTabidx==1,normal_tab:currentTabidx!=1}"
							@click="selectTab('健康', 1)">
							<view class="text">健康</view>
							<view class="bottom_line"></view>
						</view>
						<view :class="{highlight_tab:currentTabidx==2,normal_tab:currentTabidx!=2}"
							@click="selectTab('语言', 2)">
							<view class="text">语言</view>
							<view class="bottom_line"></view>
						</view>
						<view :class="{highlight_tab:currentTabidx==3,normal_tab:currentTabidx!=3}"
							@click="selectTab('社会', 3)">
							<view class="text">社会</view>
							<view class="bottom_line"></view>
						</view>
						<view :class="{highlight_tab:currentTabidx==4,normal_tab:currentTabidx!=4}"
							@click="selectTab('科学', 4)">
							<view class="text">科学</view>
							<view class="bottom_line"></view>
						</view>
						<view :class="{highlight_tab:currentTabidx==5,normal_tab:currentTabidx!=5}"
							@click="selectTab('艺术', 5)">
							<view class="text">艺术</view>
							<view class="bottom_line"></view>
						</view>
					</view>

					<!-- <uni-segmented-control :current="current" :values="items" style-type="text" activeColor="#58C866"
						@clickItem="onClickItem" /> -->
				</view>
			</u-sticky>
			<view>
				<scroller @init="initScroller" @down="refreshData" @up="getData" :up="optUp"
					@scroll="navFloatShow(scroller)" :fixed="false">

					<!-- <articleList :list="list" /> -->
					<view class="" v-if="list.length > 0" id="mainContent">
						<view v-for="(item, idx) in list" class="table-list" :key="idx" :data-time="item.createTime">
							<view class="avatarMul">
								<!-- <image class="avatarImg" mode="aspectFill" v-for="(val, index) in item.areas"
									:key="index">{{val}}</image> -->
								<planAvatar :areas="item.areas" style="width: 100%; height: 100%;"></planAvatar>
							</view>
							<view class="inline details">
								<view class="listTop">
									<view class="">
										<span class="name f32 bold" v-if="item.status==2">正在准备新建教案</span>
										<span class="name f32 bold" v-else>{{ item.name==null?"":item.name }}</span>
									</view>
									<view class="listRight">
										<!-- <button class="share" plain open-type="share" @click="shareClick(item)"> -->
										<button class="share" plain open-type="share" data-name="shareBtn"
											@click="shareClick(item)" :data-obj="shareParams">
											<view class="icon-share"
												style="width: 30rpx; height: 30rpx; margin-right: 10rpx;">
											</view>
											分享
										</button>
									</view>
								</view>

								<view class="analyze">
									<u-collapse ref="collapseView" :border="false" @close="handleAnalyzeClose(idx)"
										@open="handleAnalyzeOpen(idx)">
										<u-collapse-item ref="collapseItem" class="f28" title="教案内容" :name="idx"
											:line="11" :value="item.expanded?'收起':'展开'" v-if="item.status==0">
											<view style="display: flex;">
												<span class="order inline"></span>
												<text class="u-collapse-content text inline f28"
													:class="{showAllIN:item.expanded, hidetext:!item.expanded}">
													{{ item.description }}
												</text>
											</view>
										</u-collapse-item>
										<u-collapse-item ref="collapseItem" class="f28" title="教案内容" :name="idx"
											:value="'教案正在生成中'" v-else-if="item.status==2">
										</u-collapse-item>
										<u-collapse-item ref="collapseItem" class="f28" title="教案内容" :name="idx"
											:line="11" :value="item.expanded?'收起':'展开'" v-else>
											<view v-if="!item.content">
												<view style="display: flex;">
													<span class="order inline"></span>
													<text class="u-collapse-content text inline f28"
														:class="{showAllIN:item.expanded, hidetext:!item.expanded}">
														{{ item.description }}
													</text>
												</view>
											</view>
											<view v-else>
												<view style="display: flex;">
													<span class="order inline"></span>
													<text class="u-collapse-content text inline f28"
														:class="{showAllIN:item.expanded, hidetext:!item.expanded}">
														<!-- {{ item.description + "\n" + item.content }} -->
														{{ item.content }}
													</text>
												</view>
											</view>

										</u-collapse-item>
									</u-collapse>
									<image class="analyze-icon icon-word-ai" />
									<image class="analyze-title-bottom icon-star-line" />
								</view>
								<view style="margin: 10rpx 0rpx;">
									<span class="f24 time">{{ formatDateYMDHMS(item.createTime) }}</span>
									<!-- <span class="delete" @click="handleDelete(item.id, idx)">
										<image class="icon-delete"></image>
									</span>
									<span class="edit" @click="handleEditObserve(item)">
										<image class="icon-edit"></image>
									</span> -->
								</view>
								<view class="item-content" v-if="item.fileUrl">
									<image class="icon-word" style="width: 30rpx; height: 30rpx; margin-right: 10rpx;"
										@click="copyBtn(item)">
									</image>
									<view class="left-content">教案文件:</view>
									<view class="right-content" @click="copyBtn(item)">
										<view class="text">{{item.fileUrl}}</view>
										<image class="icon-copy icon">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroller>
			</view>

		</view>

		<!-- <uni-load-more v-if="tableList.length > 0" :status="status" :contentText="contentText"></uni-load-more> -->

		<view class="save-popup" v-if="assistantShow">
			<u-popup :show="assistantShow" mode="center" @close="assistantShow = false">
				<view
					style="display: flex;align-items: center;flex-direction: column;justify-content: center;height: 100%;">
					<view>
						<text class="f32 bold success-tips">让您久等啦～</text>
						<text class="f32 bold success-tips">ai分析已完成，请查看</text>
					</view>
					<view class="save-btn mt50">
						<u-button text="确定" @click="handle"></u-button>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 筛选时间 -->
		<u-datetime-picker ref="myElement" :show="selectDateShow" v-model="dateDaya" mode="year-month"
			confirmColor="#58C866" @cancel="selectDateShow = false" title="选择发表日期" v-on:confirm="confirmDate"
			v-on:change="changeDate"></u-datetime-picker>
		<!-- 添加按钮 -->
		<!-- <view class="add icon-add" @click="handleAddObserve" @touchstart="handleMouseDown"
			@touchmove.stop="handleMouseMove" @touchend="handleMouseUp" :style="{ top: top + 'px', left: left + 'px'}">
		</view> -->
		<!-- 弹框提示 -->
		<rf-toast :show="showWarn" @click="showWarn = false" :isSus="false" :title="errMsg"></rf-toast>

		<!-- 删除该观察记录确认弹窗 -->
		<rf-alert :show="confirmShow" @close="confirmShow=false" @confirm="confirm" title="提示"
			desc="确认删除该教案文件?"></rf-alert>

		<!-- 用户未注册 提示注册 -->
		<rf-alert :show="showRegister" @close="showRegister=false" @confirm="onClickRegister" title="提示" desc="您还未登录"
			confirmText="去登录"></rf-alert>

		<!-- 加载loading -->
		<rf-load :loading="loading" title="加载中..."></rf-load>
	</view>
</template>

<script>
	import scroller from '@/components/scroller/scroller.vue';
	import articleList from '@/components/article/list.vue';
	import CryptoJS from 'crypto-js';

	import {
		mapMutations,
		mapState,
	} from 'vuex'; //引入mapState

	import {
		postlist,
		postgetAiByList,
		postgetAiById,
		postdelete,
		getsharePlan,
	} from "@/api/coures.js"

	import {
		formatDateYMD,
		formatDateYMDHMS
	} from "@/utils/util.js"

	import {
		zip,
		Observable,
		Subject,
		pipe,
		from,
		observable,
		timer,
		interval,

	} from 'rxjs'

	import {
		retryWhen,
		takeWhile,
		concatMap,
		filter,
		switchMap,
	} from 'rxjs/operators'


	// 创建两个主题
	const confirmSub = new Subject();
	const changeSub = new Subject();

	// 开始每3秒请求一次
	var source = null;

	export default {
		components: {
			articleList,
			// pageLoading,
			scroller,
			// iconfont
		},
		data() {
			return {
				navbarHeight: this.navBarHeight,
				screenWidth: this.screenWidth,
				screenHeight: this.screenHeight,
				items: ['全部', '健康', '语言', '社会', '科学', '艺术'],
				status: "more",
				contentText: {
					contentdown: "查看更多",
					contentrefresh: "加载中...",
					contentnomore: "没有更多了。。。",
				},

				aiList: [], // ai分析未完成的观察记录 ID

				confirmShow: false, // 删除确认窗口

				dateStr: '',
				week: '',

				nowYear: '',
				nowMonth: '',
				nowDay: '',

				selectDateShow: false,
				assistantShow: false, // ai生成完成提示
				dateDaya: Number(new Date()),
				params: {
					id: ""
				},
				tableList: [],
				analyzeBtn: '展开',

				allList: [], // 弹出多个孩子的观察，孩子列表
				total: 0,

				dragging: false, // 是否正在拖拽
				mouseX: 0, // 鼠标在元素内的X坐标
				mouseY: 0, // 鼠标在元素内的Y坐标
				left: 0, // 元素左上角距离父容器左侧的距离
				top: 0, // 元素左上角距离父容器顶部的距离


				showWarn: false,
				errMsg: "",
				loading: false, // 加载中提示
				showRegister: false, // 用户未注册提示

				// 删除
				delId: "",
				delIndex: "",

				observe: "", // 分享传参

				currentTabidx: 0,

				shareParams: {
					name: "",
					homePhoto: "",
				},



				optUp: {
					auto: true,
					onScroll: true,
					page: {
						size: 10
					},
					empty: {
						tip: '暂无内容~'
					}
				},

				scroller: {},
				currentSliderIndex: 0,
				category_id: "",
				year: "",
				month: "",
				category_index: 0,
				slider: [],
				list: [],

				keyStr: "s517gDRv+GbuckZ/nSMFew==", //加密密钥
				ivStr: "WdkI30nJkT6cVy3q6fimMw==", //矢量

			};
		},

		// domStreams: ['confirmM$', 'change$'],
		// observableMethods: {
		// 	confirmM: 'confirmM$',
		// 	change: 'change$'
		// },
		subscriptions() {
			return {

			}
		},
		onTabItemTap(e) {
			// 点击tabbaritem键的触发，常用于刷新
			console.log("onTabItemTap" + JSON.stringify(e));
		},
		created() {

			let that = this
			zip(confirmSub, changeSub).subscribe(([val1, val2]) => {
				// console.log('收到值:', uni.$u.timeFormat(val1.value, 'yyyy mm'));

				/* 	that.params.year = uni.$u.timeFormat(val1.value, 'yyyy')
					that.params.month = uni.$u.timeFormat(val1.value, 'mm')

					that.nowMonth = that.params.month;
					that.nowYear = that.params.year;

					that.params.pageNum = 1

					// 搜索观察
					that.getObserveList() */

			})


			// 获得列表内容。
			// 在列表为空的时候，每个三秒获取一次列表直到获取到数据
			// source = timer(0, 3000).pipe(
			// 	concatMap(() => {
			// 		return new Promise((resolve, reject) => {
			// 			postlist(that.params).then(res => {
			// 				resolve(res)
			// 			}).catch(err => {
			// 				reject(err)
			// 			})
			// 		})
			// 	}), // 在每次间隔后发起请求
			// 	retryWhen(errors => errors.pipe(
			// 		// 请求错误的时候，继续请求
			// 		console.log("liset-----------" + JSON.stringify(errors)),
			// 		takeWhile((_, index) => true),
			// 	)),
			// 	takeWhile((data) => {
			// 		// 没有获取到数据，继续请求
			// 		return that.tableList.length < 1;
			// 	}),
			// );


			// 订阅源 observable
			// source.subscribe({
			// 	next: (res) => {
			// 		console.log('获取列表' + JSON.stringify(res))
			// 		that.tableList = res.data.rows ? res.data.rows : []
			// 	},
			// 	error: (error) => {
			// 		console.log('Error:---' + error)
			// 	},
			// 	complete: () => {
			// 		console.log('Completed after receiving the correct data.')
			// 	},
			// })

		},
		computed: {
			...mapState(['userInfo', 'hasLogin']),

		},
		onLoad(options) {
			this.left = this.screenWidth - 80;
			this.top = this.screenHeight - 180;

			const planid = options.planid;
			console.log("-------share---", planid);
			this.params.id = this.aes_encrypt(planid);

			console.log("-------share---", this.params.id);

		},
		mounted() {
			this.initTime();

			var _that = this;

			uni.$on('shareParams', function(data) {
				_that.observe = data;
				console.log("-----shareParams-----" + JSON.stringify(data));
				_that.shareParams.name = data.name
				if (data.imagesList && data.imagesList[0]) {
					_that.shareParams.homePhoto = data.imagesList[0].url
				} else {
					_that.shareParams.homePhoto = data.imageUrl
				}
			});

		},
		onUnload() {
			uni.$off('shareParams')
		},
		onShow() {
			let _that = this;
			console.log("onshow");
			_that.loadData();
			console.log("onshow1");
		},
		onHide() {
			console.log("--------------onHide----------------");
			if (this.tableList) {
				for (var i = 0; i < this.tableList.length; i++) {
					this.tableList[i].expanded = false
					console.log("-----onHide----");
					if (this.$refs.collapseView) {
						this.$refs.collapseView[i].init()
					}

				}
			}

			// if (this.tableList.length > 0) {
			// 	this.$forceUpdate();
			// 	this.$nextTick(() => {
			// 		console.log("$nextTick");
			// 		this.$refs.collapseView[0].init()
			// 		// this.$refs.collapseItem[0].queryRect()
			// 	})
			// }
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function(res) {
			console.log(res);
			console.log("this.observe: " + JSON.stringify(this.observe));
			if (res.from === 'button') {
				var imgUrl = ""
				if (this.observe.imagesList && this.observe.imagesList[0]) {
					var imgUrl = this.observe.imagesList[0].url
				} else {
					imgUrl = this.observe.imageUrl
				}

				// if (isNaN(imgUrl)) {
				// 	imgUrl = this.observe.headSculpture
				// }
				return {
					title: this.observe.name,
					path: this.observe.path,
					imageUrl: "https://superta.noboyun.com/static/share/plan.png", //数据返回的图片数据
					success: function(res) {
						// 转发成功
						console.log(res)
					},
					fail: function(res) {
						// 转发失败
						console.log(res)
					}
				}
			} else { //用户点击右上角3个点分享（小程序端）
				var shareId = this.userInfo.id;
				return {
					title: "邀请好友，获VIP特权",
					path: '/pages/home/home?shareId=' + shareId,
					imageUrl: "https://superta.noboyun.com/static/share/default.png", //数据返回的图片数据
					success: function(res) {
						// 转发成功
						console.log(res)
					},
					fail: function(res) {
						// 转发失败
						console.log(res)
					}
				}

			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '刷新中'
			});
			this.loadData();
		},
		methods: {
			goback() {
				uni.switchTab({
					url: "/pages/observe/observe"
				})
			},
			/*初始化滚动*/
			initScroller(scroller) {
				this.scroller = scroller;
			},

			/*刷新数据*/
			refreshData() {
				uni.showLoading({
					title: '刷新中'
				});
				this.scroller.resetUpScroll();
			},

			/*加载数据*/
			loadData() {
				console.log("loadData");
				this.slider = [];
				this.list = [];
				console.log("loadData1");

				this.currentSliderIndex = 0;
				this.scroller.resetUpScroll();
				console.log("loadData-end");
			},

			/*获取数据*/
			getData() {
				let _that = this

				getsharePlan(this.params).then(res => {
					console.log("getDatagetDatagetData" + JSON.stringify(res));
					if (res.code == 200) {
						if (this.scroller.num == 1) {
							this.list = [];
						}
						if (this.slider.length == 0) {
							this.slider = [res.data];
						}
						this.list = this.list.concat(res.data);

						this.scroller.endByPage(1, 1);
						this.showPageLoading = false;
					} else {
						this.scroller.endSuccess();
						this.$alert(res.msg);
					}
				}).catch(err => {
					console.log("catch" + err);
					this.scroller.endErr();
				}).finally(() => {

					console.log("finally");
					uni.stopPullDownRefresh();
					uni.hideLoading();
				})

			},

			/*切换导航*/
			selectTab(category_id, index) {
				if (this.currentTabidx != index) {
					this.currentTabidx = index;
				}
				// this.showMenu = false;
				this.category_index = index;
				this.category_id = category_id;
				// var nextIndex = index - 1;
				// nextIndex = nextIndex <= 0 ? 0 : nextIndex;
				// this.scroll_category_id = `category_id-${nextIndex}`; //动画滚动,滚动至中心位置
				this.loadData();

				// #ifdef H5
				// uni.navigateTo({
				// 	url: '/pages/article/list?category_id=' + this.category_id + '&category_index=' + this.category_index
				// });
				// #endif
			},
			...mapMutations(["login", "updateState"]),
			//加密
			aes_encrypt(word) {

				var key = CryptoJS.enc.Base64.parse(this.keyStr);
				var iv = CryptoJS.enc.Base64.parse(this.ivStr);

				// var srcs = CryptoJS.enc.Utf8.parse(word);
				var encrypted = CryptoJS.AES.encrypt(word, key, {
					iv: iv,
					mode: CryptoJS.mode.CBC,
					padding: CryptoJS.pad.Pkcs7
				});
				return encrypted.toString();
			},
			formatDateYMDHMS(dateStr) {
				return formatDateYMDHMS(dateStr)
			},
			// selectTab(e) {
			// 	if (this.currentTabidx != e) {
			// 		this.currentTabidx = e;
			// 	}
			// },
			copyBtn(item) {
				let _that = this;
				wx.setClipboardData({
					//复制文本
					data: item.fileUrl,
					success: function(res) {
						wx.showToast({
							title: '复制成功',
							icon: 'none',
							mask: 'true' //是否设置点击蒙版，防止点击穿透
						});
					}
				});
			},
			showTologin() {
				if (!this.hasLogin) {
					this.showRegister = true;
				}
			},
			// 确认去注册
			onClickRegister() {
				this.showRegister = false;
				uni.switchTab({
					url: "/pages/home/home"
				});

			},
			_login() {
				let _that = this;
				from(getcode()).pipe(
					switchMap(code => {
						return from(getOpenid(code))
					}),
					switchMap(res => {
						return from(toLogin(res.data, "", "", ""))
					}),
				).subscribe({
					next: (result) => {
						console.log("-------------登录成功----------------" + JSON.stringify(result));
						/* 登录成功 */
						_that.updateState(result)
						// 方法二
						// this.$store.commit("updateState", {
						// 	hasLogin: true,
						// 	userInfo: res.userInfo,
						// });
						_that.loadData()
					},
					error: (err) => {
						console.error('An error occurred:', err);
						// 如果未注册，提示去注册。
						if (err.code === 401) {
							_that.showRegister = true;
						}
					},
					complete: () => {
						_that.loading = false
						console.log("-------------登录结束----------------");
						/* ... */
					}, // 不会执行，因为发生了错误	
				})
			},

			// 获取单个ai分析结果
			_getAiById() {
				postgetAiById().then(res => {})
			},

			handle() {
				// 消除ai分析已完成的提示
				this.assistantShow = false
			},
			deepClone(obj) {
				if (obj === null || typeof obj !== 'object') {
					return obj;
				}

				let clone = Array.isArray(obj) ? [] : {};

				for (let key in obj) {
					if (obj.hasOwnProperty(key)) {
						clone[key] = this.deepClone(obj[key]);
					}
				}

				return clone;
			},
			// 分享
			shareClick(item) {
				console.log("observe_shareshare ", item.id)

				this.observe = this.deepClone(item);
				this.observe.name = "教案" + this.observe.name;
				this.observe.path = "/pages-sub/share/plan?observeid=" + item.id;
			},

			lookImg: function(val) {
				const urls = val[0].map(item => {
					return item.url
				})
				const current = val[1]
				console.log(urls);
				console.log(current);

				uni.previewImage({
					urls,
					current
				})
			},
			// 初始化日期
			initTime() {
				const time = new Date();
				//获得系统年份;
				const year = time.getFullYear();
				//获得系统月份;
				const month = time.getMonth() + 1;
				//获得系统当月分天数;
				const day = time.getDate();
				//获得系统星期几;
				let dayCycle = time.getDay();
				//使用数组更改日期样式;
				const dayCycleArray = ["日", "一", "二", "三", "四", "五", "六"];
				for (let i = 0; i < 7; i++) {
					if (dayCycle == i) {
						//将dayCycleArray的数赋值到系统星期几里面中去;
						dayCycle = dayCycleArray[i];
					}
				}
				this.dateStr = year + '/' + month + '/' + day + ' ';
				this.week = '星期' + dayCycle;
				this.nowMonth = month;
				this.nowDay = day;
				this.nowYear = year;
			},
			selectDate() {
				if (!this.hasLogin) {
					this.showRegister = true;
					return
				}
				this.selectDateShow = true;

			},
			// 选定日期， 筛选观察
			confirmDate(e) {

				// console.log('confirmDate收到值:', uni.$u.timeFormat(e.value, 'yyyy mm'));
				// confirmSub.next(e)
				this.selectDateShow = false;
				// 搜索参数
				this.params.year = uni.$u.timeFormat(e.value, 'yyyy')
				this.params.month = uni.$u.timeFormat(e.value, 'mm')

				// 用于显示时间
				this.nowMonth = this.params.month;
				this.nowYear = this.params.year;
				this.nowDay = uni.$u.timeFormat(e.value, 'dd')

				this.params.pageNum = 1

				// 查询数据
				this.year = uni.$u.timeFormat(e.value, 'yyyy')
				this.month = uni.$u.timeFormat(e.value, 'mm')

				// 搜索教案
				this.loadData();
			},
			changeDate(e) {
				// console.log('changeDate收到值:', uni.$u.timeFormat(e.value, 'yyyy mm'));
				// changeSub.next(e)
			},

			// 删除观察
			handleDelete(id, idx) {
				let _that = this
				console.log(id, idx);
				this.delId = id;
				this.delIndex = idx;
				this.confirmShow = true

			},
			confirm() {
				console.log(this.delId, this.delIndex);
				let _that = this
				postdelete(this.delId).then(res => {
					console.log(res);
					console.log("res: " + JSON.stringify(res));
					if (res.code == 200) {

						_that.list.splice(_that.delIndex, 1)
						_that.confirmShow = false;
						_that.loadData()
					}
				}).catch(err => {
					_that.errMsg = "删除失败"
					_that.showWarn = true
				})
			},
			// 编辑当前教案记录
			handleEditObserve(item) {
				console.log("itemitem: " + JSON.stringify(item));
				uni.navigateTo({
					url: '/pages-sub/addCourse/addCourse?type=update&item=' + encodeURIComponent(JSON.stringify(
						item))
				})
			},
			// 教案内容关闭事件
			handleAnalyzeClose(index) {
				let _that = this

				clearTimeout(this.timer)
				this.timer = null
				this.timer = setTimeout(() => {
					_that.list[index].expanded = false;
					_that.$forceUpdate();
				}, 300);
			},
			// 观赏分析展开事件
			handleAnalyzeOpen(index) {
				this.list[index].expanded = true;
				this.$forceUpdate();
			},
			// 新增观察记录
			handleAddObserve() {
				if (!this.hasLogin) {
					this.showRegister = true;
					return
				}
				uni.navigateTo({
					url: '/pages-sub/addCourse/addCourse?type=create'
				});
			},
			handleMouseDown(event) {
				this.dragging = true;
				this.mouseX = event.changedTouches[0].clientX;
				this.mouseY = event.changedTouches[0].clientY;
			},
			handleMouseMove(event) {
				if (this.dragging) {
					console.log("event", event);
					console.log("screenWidth", this.screenWidth);
					console.log("screenHeight", this.screenHeight);
					const deltaX = event.changedTouches[0].clientX - this.mouseX;
					const deltaY = event.changedTouches[0].clientY - this.mouseY;

					var left = this.left + deltaX;
					var top = this.top + deltaY;
					if (left <= 0) {
						this.left = 0
					} else if (left >= (this.screenWidth - 60)) {
						this.left = (this.screenWidth - 60)
					} else {
						this.left = left;
					}
					if (top <= 0) {
						this.top = 0
					} else if (top >= (this.screenHeight - 100)) {
						this.top = (this.screenHeight - 100)
					} else {
						this.top = top;
					}
					this.mouseX = event.changedTouches[0].clientX;
					this.mouseY = event.changedTouches[0].clientY;
				}
			},
			handleMouseUp(event) {
				console.log(event);
				this.dragging = false;
			},
		},
		onReachBottom() {

		},
		onReady() {
			//  设置 top 时间，显示最新一条信息的时间
			// setTimeout(() => {
			// 	if (this.tableList.length > 0) {
			// 		const query = uni.createSelectorQuery().in(this);
			// 		query.selectAll('.table-list').boundingClientRect(data => {
			// 			let temp = data[0].dataset.time.split(' ')[0].split('-')
			// 			this.nowDay = temp[2]
			// 			this.nowMonth = temp[1]
			// 			this.nowYear = temp[0]
			// 		}).exec();
			// 	}
			// }, 1000)
		},
		onPageScroll: function(e) {

			if (this.list.length > 0) {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.table-list').boundingClientRect(data => {
					for (let index = 0; index < data.length; index++) {
						if (data[index].top > 190 && data[index].top < 300) {
							let temp = data[index].dataset.time.split(' ')[0].split('-')
							this.nowDay = temp[2]
							this.nowMonth = temp[1]
							this.nowYear = temp[0]
							break
						};
					}
				}).exec();

			}
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.observe-content {

		.listTop {
			display: flex;
			justify-content: space-between;

			.all {
				padding: 8rpx 20rpx;
				font-size: 24rpx;
				background-color: #EDEFF5;
				color: #43465C;
				border-radius: 20rpx;
				margin-left: 30rpx;
			}



			.listRight {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.share {
					border: none;
					color: #1CC367;
					padding: 5rpx 0 5rpx 5rpx;
					line-height: 12px;
					font-size: 14px;
					display: flex;
					align-items: center;
					justify-content: flex-end;

				}
			}
		}


		.headerImg {
			width: 100%;
			position: fixed;
			z-index: 99;
		}

		.header {
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 1;
			top: 0;
			background-color: #FFC972;


			.header-bg {
				width: 100%;
				height: 100%;
			}

			.date {}

			.hierarchy-up {
				top: 17px;
				// position: absolute;
				// width: 100%;
				// z-index: 9;
			}

			.dateContent {
				width: 100%;
				position: absolute;
				z-index: inherit;
				top: 50%;
				transform: translateY(-50%);
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 80rpx 0 98rpx;
			}

			.circle-button {
				position: relative;
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				background-color: white;
				margin-left: 10rpx;

			}

			.arrow-right {
				content: "";
				height: 18rpx;
				width: 18rpx;
				border-color: #FF7035;
				border-style: solid;
				position: absolute;
				top: 12rpx;
				left: 8rpx;
				border-width: 6rpx 6rpx 0 0;
				transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			}

			.new-btn {

				width: 196rpx;
				height: 72rpx;
				background: linear-gradient(180deg, #FFC972 0%, #FF7035 100%);
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(148, 67, 21, 0.24), inset 0rpx 2rpx 6rpx 0rpx rgba(255, 255, 255, 0.5), inset 0rpx -2rpx 6rpx 0rpx rgba(255, 255, 255, 0.23);
				border-radius: 36rpx;

				display: flex;
				align-items: center;
				justify-content: center;

				.new-text {
					color: #fff;
					text-shadow: 0px 4px 8px rgba(25, 111, 56, 0.24);
				}

			}
		}

		.observe-body {
			width: 100%;
			min-height: 70vh;
			// padding: 0 32rpx;
			border-radius: 36rpx 36rpx 0 0;
			margin-top: 4rpx;
			position: relative;
			z-index: 3;
			top: -30px;
			background-color: #fff;
			box-sizing: border-box;

			.sticky_container {
				background-color: white;
				padding: 10rpx 0 0 0;
				border-radius: 36rpx 36rpx 0 0;

				.tab {

					display: grid;
					grid-template-columns: repeat(6, 1fr);
					grid-gap: 10px;
					padding: 24rpx 16rpx;

					.highlight_tab {

						height: 60rpx;

						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.text {
							font-size: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							color: #3A3D4B;
							line-height: 44rpx;
						}

						.bottom_line {
							margin-top: 10rpx;
							background-color: #58C866;
							width: 60rpx;
							height: 8rpx;
							border-radius: 4rpx;
						}

					}

					.normal_tab {

						height: 60rpx;

						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;


						.text {
							font-size: 28rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #3A3D4B;
							line-height: 44rpx;
						}

						.bottom_line {
							// margin-top: 10rpx;
							// background-color: #00000000;
							// width: 60rpx;
							// height: 8rpx;
							// border-radius: 4rpx;
						}

					}

				}

				.date {
					background-color: #fff;
					height: 80rpx;
					padding: 0 32rpx;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.now-date {
						// margin-top: 32rpx;
						// flex: 1;
					}

					.select-date {
						position: relative;
						padding-right: 45rpx;

						&:before {
							content: '';
							width: 0;
							height: 0;
							position: absolute;
							right: 10rpx;
							top: 10rpx;
							border-top: 15rpx solid #3A3D4B;
							border-left: 15rpx solid transparent;
							border-right: 15rpx solid transparent;
						}
					}
				}


			}

			// .u-picker.data-v-f45a262e {
			// 	padding-bottom: 112rpx;
			// }

			// .u-picker__view.data-v-f45a262e {
			// 	border-bottom: 2rpx solid #000;
			// }

			// .u-toolbar__cancel__wrapper {
			// 	position: absolute;
			// 	color: #3A3D4B;
			// 	left: 115rpx;
			// 	bottom: 32rpx;
			// }

			// .u-toolbar__confirm__wrapper {
			// 	position: absolute;
			// 	right: 115rpx;
			// 	bottom: 32rpx;
			// }

			// .u-popup__content.data-v-3a231fda {
			// 	border-radius: 24rpx 24rpx 0 0;
			// 	overflow: hidden;
			// }

			.table-list {
				margin-top: 40rpx;
				padding: 0 32rpx;
				display: flex;
			}

			.avatar {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				overflow: hidden;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.avatarMul {
				display: flex;
				align-items: center;
				width: 88rpx;
				height: 88rpx;
				border-radius: 10rpx;
				background-color: #EDEFF5;
				flex-wrap: wrap;
				overflow: hidden;

				.avatarImg {
					width: 24rpx;
					height: 24rpx;
					margin: 2rpx;
				}
			}

			.details {
				width: 580rpx;
				margin-left: 20rpx;

				.content {
					margin-top: 20rpx;
					width: calc(100vw - 170rpx);
					word-wrap: break-word;
				}
			}

			.image {
				margin-top: 20rpx;

				image {
					width: 480rpx;
					height: 280rpx;
					border-radius: 10rpx;
				}
			}

			.year-month {
				color: #99A1AF;
			}

			.time {
				margin-left: 15rpx;
				color: #99A1AF;
			}

			.delete {
				margin-left: 30rpx;
				cursor: pointer;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.edit {
				margin-left: 50rpx;
				cursor: pointer;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.analyze {
				margin: 15rpx 0;
				position: relative;
				background-color: #FFFFFF;

				.u-collapse {
					border-radius: 10rpx;
					background-color: #F7F9FA;
				}

				.u-collapse-item {
					width: calc(100vw - 170rpx);
					word-wrap: break-word;
				}

				// 标题head
				.u-cell__body {
					height: 80rpx;
					padding: 20rpx !important;
				}

				.u-cell__title-text {
					font-size: 28rpx !important;
					color: #3A3D4B !important;
					font-weight: 600;
					padding-left: 42rpx;
					line-height: 40rpx !important;
				}

				.u-cell__value {
					font-size: 26rpx;
					color: #000;
				}

				// 展开箭头
				.u-icon__icon--info {
					color: #000000 !important;
					font-weight: bold !important;
					font-size: 30rpx !important;
				}

				.analyze-icon {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					left: 15rpx;
					top: 22rpx;
				}

				.analyze-title-bottom {
					width: 126rpx;
					height: 15rpx;
					position: absolute;
					left: 65rpx;
					top: 52rpx;
				}

				.order {
					width: 10rpx;
					height: 10rpx;
					background-color: #3a3d4b;
					border-radius: 50%;
					margin-top: 15rpx;
				}

				.text {
					width: 448rpx;
					margin-left: 10rpx;
					color: #3A3D4B;
				}

				.u-collapse-item__content__text {
					padding: 0 28rpx 28rpx;
					color: #3A3D4B;
				}

				.showAllIN {
					height: auto;
				}

				.hidetext {

					-webkit-line-clamp: 4;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}
		}

		.delete-popup {
			.u-popup__content {
				width: 480rpx;
				height: 332rpx;
				border-radius: 20rpx;

				.success-icon {
					display: block;
					width: 128rpx;
					height: 128rpx;
					margin: 48rpx auto 0;
				}

				.success-tips {
					display: block;
					text-align: center;
					margin-top: 10rpx;
				}

				.success-text {
					display: block;
					text-align: center;
					color: #77798D;
					margin-top: 10rpx;
				}

				.u-icon__icon {
					color: #3d3d3d;
				}
			}
		}
	}

	.save-popup {
		.u-popup__content {
			width: 480rpx;
			height: 332rpx;
			border-radius: 20rpx;

			.success-icon {
				display: block;
				width: 128rpx;
				height: 128rpx;
				margin: 48rpx auto 0;
			}

			.success-tips {
				display: block;
				text-align: center;
				margin-top: 10rpx;
			}

			.success-text {
				display: block;
				text-align: center;
				color: #77798D;
				margin-top: 10rpx;
			}

			.save-btn {
				.u-button--square {
					width: 300rpx;
					height: 80rpx;
					border: none;
					border-radius: 40rpx;
					background-color: #58C866;
				}

				.u-button__text {
					font-size: 16px;
					font-weight: bold;
					color: #fff;
				}
			}
		}
	}

	.add {
		position: fixed;
		right: 20px;
		bottom: 40px;
		z-index: 999;

		width: 108rpx;
		height: 108rpx;

		cursor: move;
		user-select: none;
	}

	.item-content {
		display: flex;
		align-items: center;
		margin: 20rpx 0;

		.left-content {
			color: #77798d;
			font-size: 14px;
			// width: 100px;
			white-space: nowrap;
		}

		.right-content {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex: 1;

			.text {
				flex: 1;
				text-align: left;

				max-width: calc(100vw - 400rpx);
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.icon {
				width: 30rpx;
				height: 30rpx;
				margin: 0rpx 20rpx;
			}
		}

		.flex {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: #3a3d4b;
		}
	}
</style>